import React, { useState, useEffect } from 'react'
import { Button, SearchBar, Space,Swiper, Toast,Ellipsis,NavBar} from 'antd-mobile'
import { SearchOutline, SetOutline } from 'antd-mobile-icons'
import { useNavigate } from 'react-router-dom'
import { Refresh } from '@nutui/icons-react'
import { BackTop, Cell } from '@nutui/nutui-react'
import '@nutui/nutui-react/dist/style.css'
import '../css/Main.css'
import ButtomBar from '../../sjc/components/ButtomBar'
import axios from 'axios'

axios.defaults.baseURL = 'http://127.0.0.1:3000/'


export default function Shop() {
    const nav = useNavigate()
    let [ls, setls] = useState([])
    let [ls1, setls1] = useState([])
    let [ls2, setls2] = useState([])
    let addhot=(i)=>{
      i.hot++
      axios.put(`/szh/addhot?id=${i._id}`,i).then(res=>{
        sshop()
      })
      sessionStorage.setItem('oninshop',i.name)
      sessionStorage.setItem('shopimg',i.img)
      nav('/shop/home')
    }
    const back = () =>{
        nav(-1)
    }
    let sshop=()=>{
        axios.get('/szh/showshop').then(res=>{
          setls(res.data.gshop)
          setls1(res.data.gshop.sort((a,b)=>b.hot-a.hot).slice(0,3))
          setls2(res.data.gshop.sort((a,b)=>b.hot-a.hot).slice(3,10000))
        })
    }
    useEffect(()=>{
        sshop()
    },[])
  return (
    <div>
      {/* <div style={{width:'100%',height:'30px',background:'red',display:'flex',top:'0'}}>
        
      </div> */}
      <NavBar onBack={back} style={{
                    '--height': '46px',
                    '--border-bottom': '2px #ccc solid',
                    position:'fixed',
                    top:'0',
                    width:'100%',
                    background:'#eae9e5'
                  }}><span style={{fontSize:'20px',color:'#f0d5b8',fontWeight:'bolder'}}>人气店铺</span></NavBar>
        <div style={{width:'100%',height:'46px'}}></div>
        <div style={{width:'100%',height:'100vh',background:'#e2e1df',overflow:'scroll'}}>
          {ls1.map(i=>{
        return <div key={i._id} style={{width:'100%',height:'170px',borderBottom:'1px solid #ccc',borderTop:'1px solid #ccc',margin:'10px auto',paddingTop:'20px'}}>
          <div style={{width:'340px',height:'170px',margin:'auto'}}>
          <div style={{width:'60px',height:'170px',float:'left',lineHeight:'170px'}}>
            <span style={ls1.indexOf(i)==0?{fontSize:'36px',color:'#ffea4b',fontWeight:'bolder'}:{display:'none'}}>{ls1.indexOf(i)+1}♛</span>
            <span style={ls1.indexOf(i)==1?{fontSize:'36px',color:'#bfbfbf',fontWeight:'bolder'}:{display:'none'}}>{ls1.indexOf(i)+1}♛</span>
            <span style={ls1.indexOf(i)==2?{fontSize:'36px',color:'orange',fontWeight:'bolder'}:{display:'none'}}>{ls1.indexOf(i)+1}♛</span>
          </div>
          <div style={{float:'left',boxShadow:'0 0 1rem 0 rgba(0,0,0,0.4)'}}>
            <div style={{width:'140px',height:'170px',float:'left'}}>
            <img src={i.img} style={{width:'140px',height:'170px',borderTopLeftRadius:'10px',borderBottomLeftRadius:'10px',borderRight:'1px solid #ccc'}}></img>
          </div>
          <div style={{width:'140px',height:'170px',float:'left',background:'white',borderTopRightRadius:'10px',borderBottomRightRadius:'10px'}}>
            <h2>{i.name}</h2>
            <br />
            <p style={{fontSize:'13px',fontWeight:'bolder'}}>主题：</p>
            <br />
            <span>&nbsp;&nbsp;&nbsp;</span>
            {i.type.map(i=>{
              return <span key={i} style={{fontSize:'16px'}}><span style={{fontSize:'20px',fontWeight:'bolder'}}>·</span>{i}</span>
            })}
            <br />
            <br />
            <div>
              <span style={{float:'right'}}>&nbsp;&nbsp;&nbsp;</span>
              <button onClick={()=>{addhot(i)}} style={{fontSize:'16px',fontWeight:"bolder",float:'right',border: '1px solid #f0d5b8',background: '#eedac5',color:'white'}}>进入→</button>
            </div>
          </div>
          </div>
          
          
        </div>
        </div>
      })}
      <br />
      <h2>&nbsp;&nbsp;&nbsp;更多店铺</h2>
      {ls2.map(i=>{
        return <div key={i._id} style={{zIndex:'999',width:'340px',height:'140px',margin:'14px auto 14px',
        boxShadow:'0 0 1rem 0 rgba(0,0,0,0.4)'}}>
          <div style={{width:'140px',height:'140px',float:'left'}}>
            <img src={i.img} style={{width:'140px',height:'140px',borderTopLeftRadius:'10px',borderBottomLeftRadius:'10px',borderRight:'1px solid #ccc'}}></img>
          </div>
          <div style={{width:'200px',height:'140px',float:'left',background:'white',borderTopRightRadius:'10px',borderBottomRightRadius:'10px'}}>
            <h2>{i.name}</h2>
            <br />
            <p style={{fontSize:'13px',fontWeight:'bolder'}}>主题：</p>
            <br />
            <span>&nbsp;&nbsp;&nbsp;</span>
            {i.type.map(i=>{
              return <span key={i} style={{fontSize:'16px'}}><span style={{fontSize:'20px',fontWeight:'bolder'}}>·</span>{i}</span>
            })}
            <div>
              <span style={{float:'right'}}>&nbsp;&nbsp;&nbsp;</span>
              <button  onClick={()=>{addhot(i)}} style={{fontSize:'16px',fontWeight:"bolder",float:'right',border: '1px solid #f0d5b8',background: '#eedac5',color:'white'}}>进入→</button>
            </div>
          </div>
        </div>
      })}
        </div>
    </div>
  )
}
